<template>
  <el-dialog
    v-model="dialogVisible"
    title="账号注销"
    width="500px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <!-- 风险提示 -->
    <div class="risk-warning">
      <el-alert
        title="注销账号会导致以下数据被清除，请谨慎操作"
        type="error"
        :closable="false"
        show-icon
      >
        <div class="warning-list">
          <div class="warning-item">
            <el-icon><User /></el-icon>
            <span>个人资料和实名认证信息</span>
          </div>
          <div class="warning-item">
            <el-icon><Tickets /></el-icon>
            <span>订单记录和评价信息</span>
          </div>
          <div class="warning-item">
            <el-icon><Collection /></el-icon>
            <span>收藏的景点和商品</span>
          </div>
          <div class="warning-item">
            <el-icon><ChatDotRound /></el-icon>
            <span>发布的评论和互动记录</span>
          </div>
        </div>
      </el-alert>
    </div>

    <!-- 注销表单 -->
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="delete-form"
    >
      <!-- 注销原因 -->
      <el-form-item label="注销原因" prop="reason">
        <el-select
          v-model="form.reason"
          placeholder="请选择注销原因"
          class="w-full"
        >
          <el-option
            v-for="item in reasonOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 其他原因说明 -->
      <el-form-item
        v-if="form.reason === 'other'"
        label="原因说明"
        prop="description"
      >
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="3"
          placeholder="请详细说明注销原因"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>

      <!-- 验证码 -->
      <el-form-item label="验证码" prop="verifyCode">
        <div class="verify-code-input">
          <el-input
            v-model="form.verifyCode"
            placeholder="请输入验证码"
            maxlength="6"
          />
          <el-button
            type="primary"
            :disabled="codeTimer > 0"
            @click="sendVerifyCode"
          >
            {{ codeTimer > 0 ? `${codeTimer}s后重试` : "获取验证码" }}
          </el-button>
        </div>
      </el-form-item>

      <!-- 确认选项 -->
      <el-form-item prop="agreement">
        <el-checkbox v-model="form.agreement">
          我已知晓账号注销的风险，并确认注销该账号
        </el-checkbox>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" :loading="loading" @click="handleSubmit">
          确认注销
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  User,
  Tickets,
  Collection,
  ChatDotRound,
} from "@element-plus/icons-vue";

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue", "success"]);

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const formRef = ref(null);
const loading = ref(false);
const codeTimer = ref(0);

// 注销原因选项
const reasonOptions = [
  { label: "不再使用此账号", value: "unused" },
  { label: "账号存在安全隐患", value: "security" },
  { label: "准备更换新账号", value: "change" },
  { label: "对服务不满意", value: "unsatisfied" },
  { label: "其他原因", value: "other" },
];

const form = ref({
  reason: "",
  description: "",
  verifyCode: "",
  agreement: false,
});

// 表单校验规则
const rules = {
  reason: [{ required: true, message: "请选择注销原因", trigger: "change" }],
  description: [
    { required: true, message: "请说明注销原因", trigger: "blur" },
    { min: 10, message: "说明不能少于10个字符", trigger: "blur" },
  ],
  verifyCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码长度为6位", trigger: "blur" },
  ],
  agreement: [
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("请确认注销风险提示"));
        } else {
          callback();
        }
      },
      trigger: "change",
    },
  ],
};

// 发送验证码
const sendVerifyCode = async () => {
  try {
    // TODO: 调用发送验证码API
    ElMessage.success("验证码已发送");
    codeTimer.value = 60;
    const timer = setInterval(() => {
      codeTimer.value--;
      if (codeTimer.value <= 0) {
        clearInterval(timer);
      }
    }, 1000);
  } catch (error) {
    ElMessage.error("验证码发送失败");
  }
};

// 提交注销申请
const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    // 二次确认
    await ElMessageBox.confirm(
      "注销后，账号将无法恢复，是否确认注销？",
      "注销确认",
      {
        confirmButtonText: "确认注销",
        cancelButtonText: "再想想",
        type: "warning",
      },
    );

    loading.value = true;

    // TODO: 调用账号注销API
    await new Promise((resolve) => setTimeout(resolve, 1000));

    ElMessage.success("账号注销成功");
    emit("success");
    dialogVisible.value = false;
  } catch (error) {
    if (error === "cancel") return;
    console.error(error);
    ElMessage.error("操作失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 关闭弹窗
const handleClose = () => {
  formRef.value?.resetFields();
  form.value = {
    reason: "",
    description: "",
    verifyCode: "",
    agreement: false,
  };
};
</script>

<style lang="scss" scoped>
.risk-warning {
  @apply mb-6;

  .warning-list {
    @apply mt-4 space-y-3;

    .warning-item {
      @apply flex items-center text-gray-700;

      .el-icon {
        @apply mr-2 text-red-500;
      }
    }
  }
}

.delete-form {
  .verify-code-input {
    @apply flex gap-2;

    .el-input {
      @apply flex-1;
    }

    .el-button {
      @apply w-32;
    }
  }
}

.dialog-footer {
  @apply flex justify-end gap-2;
}
</style>
